const oDiv = document.querySelector('.box')
console.log(oDiv)
oDiv.addEventListener('change', function (e) {

    if (e.target.getAttribute('name') === 'username') {

        if (/^[a-zA-Z][a-zA-Z0-9_]{8,16}$/.test($('[name="username"]').val())) {
            $('[name="username"]').parent().css({ 'border': '3px solid green' })
        } else {
            $('[name="username"]').parent().css({ 'border': '3px solid red' })
            window.alert('只能包含数字字母下划线 , 数字不能开头 , 长度在8~16之间')
            window.location.reload()
        }

    } else if (e.target.getAttribute('name') === 'phone') {

        if (/^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|(^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$)/.test($('[name="phone"]').val())) {
            $('[name="phone"]').parent().css({ 'border': '3px solid green' })
        } else {
            $('[name="phone"]').parent().css({ 'border': '3px solid red' })
            window.alert('请输入正确的手机号格式')
            window.location.reload()
        }

    } else if (e.target.getAttribute('name') === 'xueli') {

        if ($('[name="xueli"]').val().length >= 2 && $('[name="xueli"]').val().length < 10) {
            $('[name="xueli"]').parent().css({ 'border': '3px solid green' })
        } else {
            $('[name="xueli"]').parent().css({ 'border': '3px solid red' })
            window.alert('学历字数大于1小于10')
            window.location.reload()
        }

    } else if (e.target.getAttribute('name') === 'age') {

        if ($('[name="age"]').val() >= 20 && $('[name="age"]').val().length <= 50) {
            $('[name="age"]').parent().css({ 'border': '3px solid green' })
        } else {
            $('[name="age"]').parent().css({ 'border': '3px solid red' })
            window.alert('年龄在20和50之间')
            window.location.reload()
        }

    } else if (e.target.getAttribute('name') === 'compensation') {
        if ($('[name="compensation"]').val().length >= 4 && $('[name="compensation"]').val().length <= 6) {
            $('[name="compensation"]').parent().css({ 'border': '3px solid green' })
        } else {
            $('[name="compensation"]').parent().css({ 'border': '3px solid red' })
            window.alert('薪资4位数到六位数')
            window.location.reload()
        }
    }

})


// 创建一个数组 , 存储数据数值
const arr = []


// 写入localStorage
localStorage.setItem('arr', JSON.stringify(arr))

// 阻止默认事件
$('form').click(function () {

    return false

})

// 获取标签对象
const oTbody = document.querySelector('tbody')

// submit添加点击事件
$('[name="submit"]').click(function () {
    let num = 0;

    $(this).siblings().children('input').each((index, item) => {
        num++
        if ($(item).val() === '') {
            window.alert("输入框内容不能为空!")
            return false
        } else {
            if (num === $(this).siblings().children('input').length) {

                // 获取localStorage中的数据数值
                const arr2 = JSON.parse(localStorage.getItem('arr'))

                const obj = { name: '', phone: '', xueli: '', age: '', compensation: '' }

                obj.name = $('[name="username"]').val()
                obj.phone = $('[name="username"]').val()
                obj.xueli = $('[name="xueli"]').val()
                obj.age = $('[name="age"]').val()
                obj.compensation = $('[name="compensation"]').val()

                arr2.push(obj)

                // 写入localStorage
                localStorage.setItem('arr', JSON.stringify(arr2))

                // 调用函数 动态生成页面
                setPage()
            }
        }

    })

})

// reset添加点击事件
$('[name="reset"]').click(function () {
    // 获取localStorage数据
    const aa = JSON.parse(localStorage.getItem('arr'))
    console.log(aa)
})



// 动态生成页面
function setPage() {
    // 声明字符串 , 写入数据数值
    let str = ''

    // 获取localStorage中的数据数值
    const arr3 = JSON.parse(localStorage.getItem('arr'))

    arr3.forEach((item, key) => {
        str += `
                    <tr>
                        <td style="width: 100px;">${item.name}</td>
                        <td style="width: 100px;">${item.phone}</td>
                        <td style="width: 100px;">${item.xueli}</td>
                        <td style="width: 100px;">${item.age}</td>
                        <td style="width: 100px;">${item.compensation}</td>
                        <td style="width: 100px;"><button index="${key}" name="xiugai">修改</button>&nbsp;&nbsp;<button index="${key}" name="del">删除</button></td>
                    </tr>
                `

    })


    // 写入数据数值
    $('tbody').html(str)

    // 修改按钮点击事件
    xiugai()

    // 删除按钮点击事件
    $('[name="del"]').click(function () {
        console.log(123)
        arr3.splice($('[name="del"]').attr('index') - 0, 1)
        $(this).parent().parent().html('')
        // console.log(arr)
        // 写入localStorage
        localStorage.setItem('arr', JSON.stringify(arr3))
    })

}




// 修改
function xiugai() {

    $('[name="xiugai"]').click(function () {

        // 阻止默认事件
        $('form').click(function () {

            return false

        })

        console.log(123)
        // 设定css样式
        $('body').css({ 'background': 'gray', 'width': '100%', 'height': '100%' })
        $('[name="foot"]').css({ 'display': 'block', 'left': '50%', 'top': '50%', 'z-index': '99', 'background': 'red' })

        const arr5 = JSON.parse(localStorage.getItem('arr'))

        // 获取对应的数据数值
        $('[name2="username2"]').val(arr5[$(this).attr('index') - 0].name)
        $('[name2="phone2"]').val(arr5[$(this).attr('index') - 0].phone)
        $('[name2="xueli2"]').val(arr5[$(this).attr('index') - 0].xueli)
        $('[name2="age2"]').val(arr5[$(this).attr('index') - 0].age)
        $('[name2="compensation2"]').val(arr5[$(this).attr('index') - 0].compensation)

        $('[name="close"]').click(function () {
            $('body').css({ 'background': '' })
            $('[name="foot"]').css({ 'display': 'none' })
        })

        num2 = $(this).attr('index') - 0

    })

}


$('[name="save"]').click(function () {

    // 定义一个对象
    const newObj = { name: '', phone: '', xueli: '', age: '', compensation: '' }

    newObj.name = $('[name2="username2"]').val()
    newObj.phone = $('[name2="phone2"]').val()
    newObj.xueli = $('[name2="xueli2"]').val()
    newObj.age = $('[name2="age2"]').val()
    newObj.compensation = $('[name2="compensation2"]').val()

    const arr4 = JSON.parse(localStorage.getItem('arr'))

    arr4.splice(num2, 1, newObj)

    localStorage.setItem('arr', JSON.stringify(arr4))

    setPage()

    $('[name="foot"]').css({ 'display': 'none' })
    $('body').css({ 'background': '' })
})
